<template>
  <!-- 这是图片画廊公用组件 -->
  <div class="gallary" @click="handleClick">
    <div class="wrapper">
      <swiper :options='swiperOption'>
        <swiper-slide v-for="(item,index) in imgs" :key="index">
          <img :src="item"  class="gallary-img">
        </swiper-slide>
        

        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "gallary",
  props:{
      imgs:{
          type:Array,
          default () {
            return []
          }
      }
  },
  data() {
    return {
        swiperOption:{
            pagination:'.swiper-pagination',
            // 用来显示下方分页器样式，fraction表示样式为1/2类型
            paginationType:'fraction',
            // 下面两个参数解决隐藏的模块显示后无法正常滑动和分页器不显示正确数目的问题
            observeParents:true,
            observer:true
        },
        
    }
  },
  methods: {
      handleClick(){
          this.$emit('showGallary')
      }
  },
};
</script>

<style lang='less' scoped>
// 穿透到.swiper-container修改原样式，让分页器显示出来
.wrapper /deep/ .swiper-container {
    overflow: inherit
}
.gallary {
  z-index: 999;
  position: fixed;
  display: flex;
  justify-content: center;
  flex-direction: column;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #000;
  .wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 68.5%;
    // 去除溢出影藏，显示出分页器bottom=-1rem
    // overflow: hidden;
    .gallary-img {
      width: 100%;
    }
    .swiper-pagination{
        color: #fff;
        bottom: -1rem;
    }
  }
}
</style>
